<template>
	<view class="u-skeleton">
		<!-- 顶部导航 -->
		<fa-navbar title="报修" :border-bottom="false"></fa-navbar>
		<view class="u-skeleton-rect">
			<u-swiper :list="info.images" @click="preview(info.images, swiperIndex)" @change="swiperChange" height="400" border-radius="0"></u-swiper>
		</view>
		<view class="bg-white goods-detail">
			<view class="title u-font-38 u-p-30 u-skeleton-rect">{{ info.name }}</view>
			<view class="u-p-l-30 u-p-r-30 u-p-b-30 u-skeleton-rect u-tips-color">评分： {{ info.score }}</view>
			<view class="u-p-l-30 u-p-r-30 u-p-b-30 u-skeleton-rect u-tips-color">营业时间：{{ info.time_open }}</view>
			
			<view class="u-flex u-p-30 u-border-top">
				<view class="u-skeleton-rect" @click="phoneTap(info.mobile)">
					<text class="u-font-30">电话：{{ info.mobile }}</text>					
					<!-- <text class="" style="margin-left:50px">点击拨打</text> -->
					<img src='/static/image/mobile.png' style="margin-left:50px;height:20px;width:20px;"/>
				</view>
				  
				 
			</view>
			
			<view class="u-flex u-p-30 u-border-top u-row-between">
				<view class="u-skeleton-rect">
					<text class="u-font-30">地址：{{ info.address }}</text>
					
					<!-- <text class="">￥{{ info.marketprice }}</text> -->
				</view>			  
				 
			</view>
			 
		</view>

		 
		 <!-- // 横向  -->

		<view class="bg-white u-m-t-30" v-if="info.sku_spec">
			<view class="u-p-l-30 u-p-r-30 u-p-t-30 text-weight">商品规格</view>
			<!-- @click="(sceneval = 0), (show = true)" -->
			<view class="u-p-30 u-flex u-row-between" >
				<text class="u-line-1" v-text="info.sku_spec"></text>
				<u-icon name="arrow-right" color="#909399"></u-icon>
			</view>
		</view>

		<!-- <view class="bg-white u-m-t-30" v-if="info.guarantee && info.guarantee.length">
			<view class="u-p-l-30 u-p-r-30 u-p-t-30 text-weight">服务保障</view>
			<view class="u-p-30 u-flex u-row-between" @click="guarantee_show = true">
				<view class="u-flex u-flex-wrap">
					<view class="u-m-r-15 u-m-b-15" v-for="(item, index) in info.guarantee" :key="index">
						<u-icon name="checkmark-circle" color="#f2140c"></u-icon>
						<text class="u-m-l-5">{{ item.name }}</text>
					</view>
				</view>
				<u-icon name="arrow-right" color="#909399"></u-icon>
			</view>
		</view> -->

		<view class="bg-white u-m-t-30" v-if="info.attributes && info.attributes.length">
			<view class="u-p-l-30 u-p-r-30 u-p-t-30 text-weight">商品属性</view>
			<view class="u-p-30">
				<u-table>
					<!-- <u-tr class="u-tr">
						<u-th width="35%" class="u-th">名称</u-th>
						<u-th width="65%" class="u-th">属性值</u-th>
					</u-tr> -->
					<u-tr class="u-tr" v-for="(item, index) in info.attributes" :key="index">
						<u-td width="35%" class="u-td">
							<text class="text-weight">{{ item.name }}</text>
						</u-td>
						<u-td width="65%" class="u-td">{{ item.attribute_value.map(val => val.name).join(',') }}</u-td>
					</u-tr>
				</u-table>
			</view>
		</view>

		<view class="bg-white u-m-t-30">
			<view class="u-p-30 text-weight">详情</view>
			<view class="u-p-l-30 u-p-r-30 u-p-b-30 u-skeleton-rect">
				<u-parse
					:html="info.content"
					:tag-style="vuex_parse_style"
					:domain="vuex_config && vuex_config.upload && vuex_config.upload.cdnurl ? vuex_config.upload.cdnurl : ''"
					@linkpress="diylinkpress"
				></u-parse>
			</view>
		</view>
		
		<!-- <view class="u-p-30">
			<u-parse
				:html="info.content"
				:tag-style="vuex_parse_style"
				:domain="vuex_config && vuex_config.upload && vuex_config.upload.cdnurl ? vuex_config.upload.cdnurl : ''"
				@linkpress="diylinkpress"
			></u-parse>
		</view>
		 -->
		

		 
		<u-gap height="150" bg-color="#f4f6f9"></u-gap>
		<!-- 底部导航条 -->
	 
		<u-popup v-model="guarantee_show" mode="bottom" border-radius="30">
			<view class="guarantee-content">
				<view class="u-text-center u-p-10">服务保障</view>
				<scroll-view scroll-y="true" :style="{ height: (info.guarantee && info.guarantee.length > 2 ? 600 : 350) + 'rpx' }">
					<view class="u-p-t-30">
						<u-cell-group>
							<u-cell-item
								icon="checkmark-circle"
								:icon-style="{ color: '#f2140c' }"
								:arrow="false"
								v-for="(item, index) in info.guarantee"
								:key="index"
								:title="item.name"
								:label="item.intro"
							></u-cell-item>
						</u-cell-group>
					</view>
				</scroll-view>
				<view class="confrim-btn u-p-t-20">
					<u-button
						size="medium"
						type="primary"
						hover-class="none"
						:custom-style="{ width: '80vw', backgroundColor: theme.bgColor, color: theme.color }"
						shape="circle"
						@click="guarantee_show = false"
					>
						确定
					</u-button>
				</view>
			</view>
		</u-popup>
		<!-- 海报分享 -->
	  
		 
		<!-- <fa-replys v-model="showReplay" :pid="replyId"></fa-replys> -->
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
		<!-- 底部导航 -->
	 
	</view>
</template>

<script>
// #ifdef H5
import { weixinShare } from '@/common/fa.weixin.mixin.js';
// #endif
export default {
	mixins: [
		// #ifdef H5
		weixinShare
		// #endif
	],
	data() {
		return {
			info: {},
			id: '',
			oid: '',
			cart_nums: 0,
			show: false,
			guarantee_show: false,
			sceneval: 2,
			loading: true,
			swiperIndex: 0,
			showReplay: false,
			replyId: '',
			showShare: false,
			showPoster: false,
			showCoupon:false,
			recommends: []
		};
	},
	
	
	onLoad(e) {
		this.oid = e.oid || '';
	    console.log("22",this.oid)
		// if (e.scene) {
		// 	const scene = decodeURIComponent(e.scene);
		// 	let goods_id = this.$util.getQueryString('goods_id', scene);
		// 	if (goods_id) {
		// 		this.id = goods_id;
		// 	}
		// 	invite_id = this.$util.getQueryString('invite_id', scene) || invite_id;
		// }
		if(this.oid){
			this.getInfo();
		}
		 
		
	},
	onShow() {
		// if(this.oid){
		// 	this.getInfo();
		// }
		 
	},
	computed: {
		 
		 
	},

	
	methods: {
		swiperChange(index) {
			this.swiperIndex = index;
		},
		getInfo() {
			 
			this.$api.merchindex({ oid: this.oid }).then(res => {
				if (res.code == 1) {
					this.info = res.data;
				  
					this.loading = false;
					//取同类推荐商品
				 
				} else {
					this.$u.toast(res.msg);
					setTimeout(() => {
						uni.$u.route({
							type:'back'
						});
					}, 1500);
				}
			});
		},
		goIndexPage() {
			uni.reLaunch({
				url: '/pages/index/index'
			});
		},
		getCartNums() {
			this.$api.cart_nums().then(res => {
				if (res.code) {
					this.cart_nums = res.data || 0;
				}
			});
		},
	 
		preview(images, index) {
			uni.previewImage({
				urls: images,
				current: index,
				longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏'],
					success: function(data) {
						console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					},
					fail: function(err) {
						console.log(err.errMsg);
					}
				}
			});
		},
		    phoneTap(kefutel) {
		        // console.log(this.kefutel);
		        wx.makePhoneCall({
		            phoneNumber: kefutel
		        });
		    }, 
	}
};
</script>

<style lang="scss">
page {
	background-color: #f4f6f8;
}
</style>
<style lang="scss" scoped>
.goods-detail {
	.market_price {
		text-decoration: line-through;
		margin-left: 15rpx;
	}
}
.coupon {
	padding: 0 20rpx;
	border: 1rpx solid #f2857b;
	color: #e93323;
	position: relative;
	&:before,
	&:after {
		content: ' ';
		position: absolute;
		width: 8rpx;
		height: 10rpx;
		border-radius: 10rpx;
		border: 1rpx solid #f2857b;
		background-color: #fff;
		bottom: 50%;
		margin-bottom: -8rpx;
	}
	&:before {
		left: -4rpx;
		border-left-color: #fff;
	}
	&:after {
		border-right-color: #fff;
		right: -4rpx;
	}
}

.comment {
	display: flex;
	padding: 30rpx;
	.left {
		image {
			width: 64rpx;
			height: 64rpx;
			border-radius: 50%;
			background-color: #f2f2f2;
		}
	}
	.right {
		flex: 1;
		padding-left: 20rpx;
		font-size: 30rpx;
		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10rpx;
			.like {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				.num {
					margin-right: 4rpx;
				}
			}
		}
		.content {
			margin-bottom: 10rpx;
		}
		.reply-box {
			background-color: rgb(242, 242, 242);
			border-radius: 12rpx;
			margin-top: 15rpx;
			.item {
				padding: 20rpx;
				font-size: 24rpx;
				&:not(:last-child) {
					border-bottom: solid 2rpx $u-border-color;
				}
			}
			.all-reply {
				padding: 20rpx;
				display: flex;
				align-items: center;
				.more {
					margin-left: 6rpx;
				}
			}
		}
		.bottom {
			margin-top: 20rpx;
			display: flex;
			font-size: 24rpx;
			color: #9a9a9a;
		}
		.images {
			display: flex;
			flex-wrap: wrap;
			.thumb {
				width: 130rpx;
				height: 130rpx;
				margin: 15rpx 15rpx 0 0;
			}
		}
	}
}
.guarantee-content {
	padding: 24rpx;
	text-align: center;
}

.recommends {
	padding: 30rpx 30rpx 0;
	.title {
		position: relative;
		padding-left: 15rpx;
		.stroke {
			&::before {
				content: '';
				width: 8rpx;
				height: 30rpx;
				background-color: #374486;
				position: absolute;
				top: 15%;
				left: 0rpx;
				border-radius: 20rpx;
			}
		}
	}
}

.goods-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 30rpx;
	.item {
		width: calc((100vw - 90rpx) / 2);
		background-color: #ffffff;
		box-shadow: 0px 0px 5px rgb(233, 235, 243);
		margin-bottom: 30rpx;
		border-radius: 10rpx;
		overflow: hidden;
		border: 1px solid #e9ebf3;
		.name {
			min-height: 110rpx;
		}
		.foot {
			padding: 0 15rpx;
		}
		.images {
			width: 100%;
			height: 350rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.market_price {
			text-decoration: line-through;
			margin-left: 10rpx;
		}
	}
}
</style>
